<template>
  <div class="apiConfig">
    <div class="apiBtn">
      <nav>
        <el-button type="primary" plain @click="addApi">新增api配置</el-button>
<!--        <el-button type="success" plain @click="resetApi">刷新</el-button>-->
      </nav>
    </div>
    <main>
      <el-table
        :data="tableData"
        align="center"
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="策略名称"
          width="140"
          align="center">
        </el-table-column>
        <el-table-column
          prop="apiKey"
          label="apiKey"
          align="center">
        </el-table-column>
        <el-table-column
          prop="secretKey"
          label="secretKey"
          align="center">
        </el-table-column>
        <el-table-column
          prop="passPhrase"
          label="passPhrase"
          align="center">
        </el-table-column>
        <el-table-column
          prop="balance"
          label="余额（usdt）"
          align="center"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="lastTime"
          label="最后一次通讯时间"
          align="center"
          width="200">
          <template slot-scope="scope">
            <span>
              {{ scope.row.lastTime ? $moment(scope.row.lastTime).format("YYYY-MM-DD HH:mm:ss") : '' }}
            </span>
          </template>
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="type"-->
<!--          label="type"-->
<!--          align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <span>-->
<!--              {{ scope.row.type==0 ? '实盘':'模拟盘' }}-->
<!--            </span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
          label="操作"
          align="center">
          <template slot-scope="scope">
<!--            <el-button @click="updateApi(scope.row)" type="primary" size="small">编辑配置</el-button>-->
            <span class="btnSpan" @click="updateApi(scope.row)"><i class="el-icon-edit"></i>编辑配置</span>
            <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              title="是否确定删除"
              @confirm="deleteApi(scope.row)"
              style="margin: 0 5px"
            >
<!--              <el-button slot="reference" type="danger" size="small">删除</el-button>-->
              <span class="btnSpan" slot="reference"><i class="el-icon-delete"></i>删除</span>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </main>
    <!--  新增dialog-->
    <el-dialog
    :title="title"
    :visible.sync="centerDialogVisible"
    width="500px"
    center>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="API名称" prop="name">
        <el-input v-model="ruleForm.name" placeholder="api名称自定义"></el-input>

      </el-form-item>
      <el-form-item label="apiKey" prop="apiKey">
        <el-input v-model="ruleForm.apiKey" placeholder="欧意申请的秘钥apikey" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="secretKey" prop="secretKey">
        <el-input v-model="ruleForm.secretKey" placeholder="欧意申请的秘钥secretKey" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="passPhrase" prop="passPhrase">
        <el-input v-model="ruleForm.passPhrase" placeholder="自己设置的欧意秘钥密码" :disabled="disabled"></el-input>
      </el-form-item>
<!--      <el-form-item label="类型" prop="type">-->
<!--        <el-radio-group v-model="ruleForm.type" :disabled="disabled">-->
<!--          <el-radio label="0">实盘</el-radio>-->
<!--          <el-radio label="1">模拟盘</el-radio>-->
<!--        </el-radio-group>-->
<!--      </el-form-item>-->
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="apiBindBtn('ruleForm')">确 定</el-button>
  </span>
  </el-dialog>
  </div>
</template>

<script>
import {ajax} from '@/config/strategy'
export default {
  name: "apiConfig",
  data(){
    return{
      disabled:false,
      title:'新增api配置',
      updateForm:{
        id:null,
        name:null
      },
      centerDialogVisible: false,
      ruleForm: {
        name: null,
        apiKey: null,
        secretKey: null,
        passPhrase: null,
        // type: "0"
      },
      tableData:{
        name: null,
        apiKey: null,
        secretKey: null,
        passPhrase: null,
        // type: "0"
      },
      rules: {
        name: [
          { required: true, message: '请输入api名称', trigger: 'blur' },
        ],
        apiKey: [
          { required: true, message: '请输入apiKey', trigger: 'blur' },
        ],
        secretKey: [
          { required: true, message: '请输入secretKey', trigger: 'blur' },
        ],
        passPhrase: [
          { required: true, message: '请输入api密码', trigger: 'blur' },
        ],
        // type: [
        //   { required: true, message: '请选择盘类型', trigger: 'change' }
        // ],
      }
    }
  },
  async mounted() {
    await this.getApiList()
  },
  methods:{
    // resetApi(){
    //   this.getApiList()
    //
    // },
    deleteApi(row){
      const pms={
        id:row.id
      }
      ajax.DelApi(pms).then(res=>{
        const {msg,code}=res.data
        if (code=='00000'){
          this.$message.success(msg)
          this.getApiList()
        }else {
          this.$message.error(msg)
        }
      })
    },
    //编辑api
    updateApi(row){
      this.centerDialogVisible = true
      this.disabled=true
      this.title='修改api配置'
      console.log(row)
      this.updateForm.id=row.id
      this.ruleForm= {
        name: row.name,
        apiKey: row.apiKey,
        secretKey: row.secretKey,
        passPhrase: row.passPhrase,
      }
    },
    addApi(){
      this.title='新增api配置'
      this.ruleForm={
        name: null,
        apiKey: null,
        secretKey: null,
        passPhrase: null,
        // type: "0"
      }
      this.disabled=false
      this.centerDialogVisible = true
    },
    apiBindBtn(formName){
      this.$refs[formName].validate((valid) => {
      if (valid){
        if(this.title=="新增api配置"){
          console.log(this.ruleForm)
          ajax.apiBind(this.ruleForm).then(res=>{
            const {msg,code}=res.data
            console.log(res)
            if (code=='00000'){
              this.$message.success(msg)
              this.centerDialogVisible = false
              this.getApiList()
            }else {
              this.$message.error(msg)
            }
          })
          // this.centerDialogVisible = false
        }else {
          this.updateForm.name=this.ruleForm.name
          ajax.putApi(this.updateForm).then(res=>{
            const {code,msg}=res
            if (code=='00000'){
              this.$message.success('修改成功')
              this.centerDialogVisible = false
              this.getApiList()
            }else {
              this.$message.success(msg)
            }
          })

        }
      }
      })
    },
    //api列表查询
    async getApiList(){
      await ajax.apiList().then(res=>{
        const {data,msg}=res
        this.tableData=data
      })
    },
  }
}
</script>

<style scoped lang="scss">
.apiConfig {
  background-color: #fff;
  height: 100%;
}
main{
  margin-left: 20px;
}
</style>
